<template>
	<div>
		<v-header>

		</v-header>
		<div class="top_img">
			<img src="../static/images/index_bdg.jpg" />
		</div>
		<div class="main">
			<!--个人信息-->
			<div class="per_info">
				<div class="title_per f_white">
					<div class="left pad030">个人信息</div>
					<div class="right tit_rg pad030 f_size13">
						<button @click="bank_btn_wrap1=true">修改信息</button>
						<button @click="applyShopWrap=true">申请店铺</button>
					</div>
				</div>
				<div class="per_main pad030">
					<div class="border_bot per_head">
						<span>会员头像：</span>
						<img id="showPic" :src="src+photo" style="width: 90px;height: 90px;" />
						<div class="btn right" style="position: relative;">
							<button style="position: absolute;right: 0;top: 38px;">修改</button>
							<input @change="readAsDataURL" type="file" id="file" style="width: 71px;position: relative;opacity: 0;" />
						</div>
					</div>
					<div class="new_b_row border_bot">
						<span>会员帐号：</span>
						<input v-model="username" type="" name="" id="" value="" style="line-height: 30px;padding-left: 14px;" />
						<span class="right">{{userInfo.roleTitle}}</span>
					</div>
					<div class="new_b_row border_bot">
						<span>会员密码：</span>
						<span>******</span>
						<div class="btn right">
							<button @click="modify_password_show = true">修改</button>
						</div>
					</div>
					<div class="new_b_row border_bot">
						<span>手机号码：</span>
						<input disabled="disabled" v-model="userInfo.phone" type="" name="" id="" value="" style="border: none;" />
					</div>
					<div class="new_b_row">
						<span>推&nbsp;&nbsp;荐&nbsp;&nbsp;人：</span>
						<input disabled="disabled" v-model="userInfo.referPhone" type="" name="" id="" value="" style="border: none;" />
					</div>
					<div v-show="bank_btn_wrap1" class="btn bank_btn">
						<button @click="modifyPersonalInfo">修改</button>
						<button @click="bank_btn_wrap1=false">取消</button>
					</div>
				</div>

			</div>
			<!--个人信息end-->
			<!--银行卡信息-->
			<div class="margin-top15 bank_info" id="modifyBankWarp">
				<div class="title_per f_white">
					<div class="left pad030">银行卡信息</div>
					<div class="right tit_rg pad030 f_size13">
						<!--<button>查看详情</button>-->
						<button @click="bank_btn_wrap2=true">修改信息</button>
					</div>
				</div>
				<div class="bank_main pad030">
					<div class="new_b_row border_bot">
						<span>持卡人姓名：</span>
						<input v-model="accountName" type="text" placeholder="持卡人姓名">
					</div>
					<div class="new_b_row border_bot">
						<span>开&nbsp;户&nbsp;&nbsp;银&nbsp;行：</span>
						<input v-model="bankName" type="text" placeholder="请输入开户银行的名称">
					</div>
					<div class="new_b_row border_bot">
						<span>开&nbsp;户&nbsp;&nbsp;网&nbsp;点：</span>
						<input v-model="branchName" type="text" placeholder="请输入开户银行的详细网点地址">
					</div>
					<div class="new_b_row border_bot">
						<span>银&nbsp;行&nbsp;&nbsp;卡&nbsp;号：</span>
						<input v-model="bankCard" type="text" placeholder="银行卡号">
					</div>
					<div v-show="bank_btn_wrap2" class="btn bank_btn">
						<button @click="addBankInfo">修改</button>
						<button @click="bank_btn_wrap2=false">取消</button>
					</div>

				</div>
			</div>
			<!--银行卡信息end-->
			<!--收货地址管理-->
			<div class="address_info margin-top15">
				<div class="title_per f_white">
					<div class="left pad030">收货地址管理</div>
					<div class="right tit_rg pad030 f_size13">
						<button @click="add_addr=true">新增地址</button>
					</div>
				</div>
				<div class="address_main pad030">
					<div v-for="item in adrMessageList" class="b_addr border_bot">
						<div class="addr_lf">
							<label>
                <input :checked="item.checked===1? true:false" onclick="return false;" type="checkbox">
              </label>
							<label>默认</label>
						</div>
						<div class="addr_center">
							<div class="" style="overflow: hidden;">
								<div class="left" style="margin-right: 15px;">{{item.receiver}}</div>
								<div class="left">手机号：{{item.receivePhone}}</div>
							</div>
							<div class="">{{item.province}} {{item.city}} {{item.area}} {{item.detail}}</div>
						</div>
						<div class="addr_rg">
							<div class="right">
								<button @click="deleteAddress(item.addressId)">
                  <img src="../static/images/del_icon.png"/>
                              	删除
                            </button>
							</div>
							<div class="right" style="margin-right: 20px;">
								<button @click="editeAddress(item)">
                                <img src="../static/images/revise_icon.png"/>
                                编辑
                            </button>
							</div>
						</div>
					</div>

				</div>

				<el-dialog title="收货地址" :visible.sync="add_addr">
					<div class="aShop_main pad030">
						<div class="new_b_row border_bot">
							<span>联系人</span>
							<input v-model="receiver" type="text" placeholder="请输入真实姓名">
						</div>
						<div class="new_b_row border_bot">
							<span>手机号</span>
							<input v-model="receivePhone" type="text" placeholder="请输入手机号">
						</div>
						<div class="new_b_row border_bot">
							<v-distpicker @selected="onSelected" @province="selectedProvince1" @city="selectedCity1"></v-distpicker>
						</div>
						<div class="new_b_row border_bot">
							<span>详细地址</span>
							<input v-model="detail" type="text" placeholder="例如街道名称、门牌号码等信息">
						</div>
						<div class="" style="margin-top: 10px;font-size: 16px;">
							<input :checked="checked" @click="checked=!checked" class="moren_input" type="checkbox">
							<span>设置为默认</span>
						</div>
						<div class="btn_apply">
							<button @click="addClick">确定</button>
						</div>
					</div>
				</el-dialog>
				<el-dialog title="编辑收货地址" :visible.sync="edite_addr_show">
					<div class="aShop_main pad030">
						<div class="new_b_row border_bot">
							<span>联系人</span>
							<input v-model="editeAddressData.receiver" type="text" placeholder="请输入真实姓名">
						</div>
						<div class="new_b_row border_bot">
							<span>手机号</span>
							<input v-model="editeAddressData.receivePhone" type="text" placeholder="请输入手机号">
						</div>
						<div class="new_b_row border_bot">
							<v-distpicker @selected="onSelected2" @province="selectedProvince2" @city="selectedCity2" :province="editeAddressData.province" :city="editeAddressData.city" :area="editeAddressData.area===''? false : editeAddressData.area"></v-distpicker>

						</div>
						<div class="new_b_row border_bot">
							<span>详细地址</span>
							<input v-model="editeAddressData.detail" type="text" placeholder="例如街道名称、门牌号码等信息">
						</div>
						<div class="" style="margin-top: 10px;font-size: 16px;">
							<input :checked="editeAddressData.check" @click="editeAddressData.check=!editeAddressData.check" class="moren_input" type="checkbox">
							<span>设置为默认</span>
						</div>

						<div class="btn_apply">
							<button @click="editeAddressClick(editeAddressData)">确定</button>

						</div>

					</div>
				</el-dialog>
				<el-dialog title="店铺申请" :visible.sync="applyShopWrap">
					<div class="aShop_main pad030">

						<div class="new_b_row border_bot">
							<span>店铺名称</span>
							<input v-model="applyShopData.shopName" type="text" placeholder="请输入您店铺的名称">
						</div>
						<div class="new_b_row border_bot">
							<v-distpicker @selected="onSelected3" @province="selectedProvince3" @city="selectedCity3" :province="applyShopData.province" :city="applyShopData.city" :area="applyShopData.area"></v-distpicker>

						</div>
						<div class="new_b_row border_bot">
							<span>具体地址</span>
							<input v-model="applyShopData.detail" type="text" placeholder="例如街道名称、门牌号码等信息">
						</div>
						<div class="btn_apply">
							<button @click="applyShopBtn">申请</button>
						</div>
					</div>
				</el-dialog>
				<el-dialog title="修改密码" :visible.sync="modify_password_show">
					<div class="aShop_main pad030">
						<div class="new_b_row border_bot">
							<span>原密码</span>
							<input v-model="oldPass" type="text" placeholder="请输入原密码">
						</div>
						<div class="new_b_row border_bot">
							<span>新密码</span>
							<input v-model="newPass" type="text" placeholder="请输入新密码">
						</div>
						<div class="new_b_row border_bot">
							<span>再次输入</span>
							<input v-model="againNewPass" type="text" placeholder="请再次输入新密码">
						</div>
						<div class="btn_apply">
							<button @click="modifyClick">确定</button>
						</div>
					</div>
				</el-dialog>
			</div>

		</div>
		<!--脚部-->
		<v-footer>

		</v-footer>
	</div>
</template>

<script>
	export default {
		created() {
			this.$api.get('/front/users', null, r => {

				console.log('个人信息', r)
				this.userInfo = r.data.list[0]
				this.username = r.data.list[0].username
				this.realname = r.data.list[0].realname
				this.photo = r.data.list[0].photo
			})
			this.$api.get('/front/banks', null, r => {
				console.log('银行卡信息r', r)
				if(r.data.dataCount === 0) {
					this.dataCount = 0
				} else {
					this.dataCount = 1
					console.log('this.dataCount', this.dataCount)
					this.accountName = r.data.list[0].accountName
					this.bankCard = r.data.list[0].bankCard
					this.bankName = r.data.list[0].bankName
					this.branchName = r.data.list[0].branchName
					this.bankId = r.data.list[0].bankId
				}
			})
			var self = this
			this.$api.get('/front/address', null, r => {
				console.log('管理地址r', r)
				if(r.data.list.length == 0) {
					self.isShow = false
				} else {
					this.adrMessageList = r.data.list
				}
			})
		},
		data() {
			return {
				userInfo: {},
				username: '',
				realname: '',
				src: this.$src,
				photo: '',
				pic_data: '',
				head_path: '',

				accountName: '',
				bankCard: '',
				bankName: '',
				branchName: '',
				bankId: '',
				dataCount: 0,

				adrMessageList: [],
				checked: false,
				isShow: true,
				add_addr: false,

				receivePhone: '',
				receiver: '',
				province: '',
				city: '',
				area: '',

				detail: '',

				addressId: 0,

				edite_addr_show: false,
				editeAddressData: {},

				applyShopWrap: false,
				applyShopData: {},
				bank_btn_wrap1: false,
				bank_btn_wrap2: false,

				modify_password_show: false,
				newPass: '',
				againNewPass: '',
				oldPass: '',

			}
		},
		methods: {
			readAsDataURL: function() {
				var self = this
				//检验是否为图像文件
				var file = document.getElementById("file").files[0];
				if(!/image\/\w+/.test(file.type)) {
					alert("这不是图片文件！请检查！");
					return false;
				}
				var reader = new FileReader();
				//将文件以Data URL形式读入页面
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					console.log('this.result', typeof(this.result))
					var result = this.result.split(',')[1]
					console.log('result', result)

					var showPic = document.getElementById("showPic");
					self.$api.post('/admin/upload/base64', {
						base64: result,
						ext: 'jpg'
					}, r => {
						console.log('图片上传r', r)
						self.photo = r.data
						console.log('self.photo', self.photo)
					})
					showPic.setAttribute("src", this.result)
				}
			},
			modifyPersonalInfo: function() {
				var self = this
				this.$api.put('/front/users/modifyInfo', {
					photo: this.photo,
					username: this.username,
					realname: this.realname
				}, r => {
					console.log('修改信息r', r)
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: r.data
						})
						//						self.$router.go(0)
					} else {
						self.$message(r.error);
						return false
					}
					self.bank_btn_wrap1 = false
				})

			},
			addBankInfo: function() {
				var self = this
				if(self.dataCount === 0) {
					this.$api.post('/front/banks/' + this.bankId, {
						accountName: this.accountName,
						bankCard: this.bankCard,
						bankName: this.bankName,
						branchName: this.branchName
					}, r => {
						if(r.code === 200) {
							self.$message({
								type: "success",
								message: r.data
							})
							//self.$router.go(0)
						} else {
							self.$message(r.error);
							return false
						}
					})
				} else {
					self.$api.put('/front/banks/' + self.bankId, {
						accountName: self.accountName,
						bankCard: self.bankCard,
						bankName: self.bankName,
						branchName: self.branchName
					}, r => {
						if(r.code === 200) {
							self.$message({
								type: "success",
								message: r.data
							})
							//							self.$router.go(0)
						} else {
							self.$message(r.error);
							return false
						}
					})
				}
				self.bank_btn_wrap2 = false
			},
			addClick: function() {
				var self = this
				self.add_addr = false
				if(this.checked === false) {
					this.checked = 0
				} else {
					this.checked = 1
				}
				this.$api.post('/front/address', {
					receivePhone: this.receivePhone,
					receiver: this.receiver,
					province: this.province,
					city: this.city,
					area: this.area,
					detail: this.detail,
					checked: this.checked
				}, r => {
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: r.data
						})
						self.$router.go(0)
					} else {
						self.$message(r.error);
						return false
					}
				})
			},
			editeAddressClick: function(editeAddressData) {
				var self = this
				self.edite_addr_show = false
				console.log(this.checked)
				if(self.editeAddressData.check === false) {
					self.editeAddressData.check = 0
				} else {
					self.editeAddressData.check = 1
				}
				this.$api.put('/front/address/' + editeAddressData.addressId, {
					receivePhone: self.editeAddressData.receivePhone,
					receiver: self.editeAddressData.receiver,
					province: self.editeAddressData.province,
					city: self.editeAddressData.city,
					area: self.editeAddressData.area,
					detail: self.editeAddressData.detail,
					checked: self.editeAddressData.check,

				}, r => {
					//					self.$router.go(0)
					console.log('r', r)
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: r.data
						})
					} else {
						self.$message(r.error);
						return false
					}
					self.$router.go(0)
				})
			},
			onSelected(data) {
				this.province = data.province.value
				this.city = data.city.value
				this.area = data.area.value
				console.log('this.province2', this.province)
			},
			onSelected2(data) {
				this.editeAddressData.province = data.province.value
				this.editeAddressData.city = data.city.value
				this.editeAddressData.area = data.area.value
				console.log('this.province2', this.province)
			},
			onSelected3(data) {
				this.applyShopData.province = data.province.value
				this.applyShopData.city = data.city.value
				this.applyShopData.area = data.area.value
				console.log('this.applyShopData.city', this.applyShopData.city)
			},
			deleteAddress: function(id) {
				var self = this
				self.$confirm('确定删除地址?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$api.delete('/front/address/' + id, null, r => {
						console.log('删除地址成功r', r)
						if(r.code === 200) {
							self.$message({
								type: "success",
								message: r.data
							})
							self.$router.go(0)
						} else {
							self.$message(r.error);
							return false
						}
					})

				}).catch(() => {

				});
			},
			editeAddress: function(item) {
				var self = this
				self.edite_addr_show = true
				self.editeAddressData = item
				if(self.editeAddressData.checked === 1) {
					self.editeAddressData.check = true
				} else {
					self.editeAddressData.check = false

				}
			},
			applyShopBtn: function() {
				var self = this
				self.applyShopWrap = false
				this.$api.post('/front/ShopApply', {
					shopName: this.applyShopData.shopName,
					province: this.applyShopData.province,
					city: this.applyShopData.city,
					area: this.applyShopData.area,
					detail: this.applyShopData.detail
				}, r => {
					console.log('申请店铺r', r)
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: r.data
						})
					} else {
						self.$message(r.error);
						return false
					}
				})
			},
			modifyClick: function() {
				var self = this
				console.log('this.newPass', this.newPass)
				console.log('this.againNewPass', this.againNewPass)

				if(this.newPass != this.againNewPass) {
					self.$message('两次输入的新密码不一样！');
					return false
				}
				this.$api.post('/front/users/modifyPass', {
					oldPass: self.oldPass,
					newPass: self.newPass
				}, r => {
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: r.data
						})
					} else {
						self.$message(r.error);
					}
				})
				self.modify_password_show = false
			},
			selectedProvince3(data) {
				console.log('data', data)
				this.applyShopData.province = data.value
			},
			selectedCity3(data){
				console.log('市data', data)
				this.applyShopData.city = data.value
			},
			selectedProvince2(data) {
				this.editeAddressData.province = data.value
			},
			selectedCity2(data){
				this.editeAddressData.city = data.value
			},
			selectedProvince1(data) {
				this.province = data.value
			},
			selectedCity1(data){
				this.city = data.value
			}

		}
	}
</script>